<template>
	<view class="list">
		<view class="item" @click="bindBillInfo(item)" v-for="(item,index) in pageData" :key="index">
			<image src="../../static/bill-tx.png" mode="" v-if="item.reason == 'withdrawal'"></image>
			<image src="../../static/bill-cz.png" mode="" v-if="item.reason == 'recharge'"></image>
			<image src="../../static/bill-zz.png" mode="" v-if="item.reason == 'transfer'"></image>
			<image src="../../static/bill-sy.png" mode="" v-if="item.reason == 'invest_earnings'"></image>
			<image src="../../static/bill-zz.png" mode="" v-if="item.reason == 'receive_transfer'"></image>
			<image src="../../static/icon_sxf.png" mode="" v-if="item.reason == 'commission'"></image>
			<image src="../../static/bill-sy.png" mode="" v-if="item.reason == 'investEarnings'"></image>
			<image src="../../static/bill-lc.png" mode="" v-if="item.reason == 'invest'"></image>
			<image src="../../static/icon_bjth.png" mode="" v-if="item.reason == 'invest_back'"></image>
			<view class="right">
				<view class="">
					<text class="title">{{item.note}}</text>
					<text class="time">{{item.changeTime}}</text>
				</view>
				<text :class="item.changeAmount>0&&'active'">{{item.changeAmount>0?'+':''}}{{item.changeAmount}}U</text>
			</view>
		</view>
		<image src="../../static/empty.png" mode="widthFix" style="width: 348rpx;display: block;margin:400rpx auto;" v-if="emptyState"></image>

	</view>
</template>

<script setup>
	import {
		balanceHistoryList
	} from "@/util/api.js"
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref
	} from "vue";
	const pageDAO = ref({
		"pageNum": 1,
		"pageSize": 10,
		"reason": "",
		"type": ""
	})
	const emptyState = ref(false)
	const pageData = ref([])
	onLoad((params) => {
		console.log(params)
		pageDAO.value.reason = params.state
		getData()
	})
	const getData= async () => {
		const result = await balanceHistoryList(pageDAO.value)
		if(pageDAO.value.pageNum==1){
			if(result.data.records.length==0){
				emptyState.value = true
			}else{
				emptyState.value = false
			}
			pageData.value = result.data.records
		}else{
			pageData.value = pageData.value.concat(result.data.records)
		}
		
	}
	const bindBillInfo = (item) => {
		uni.navigateTo({
			url: "/pages/billInfo/billInfo?item="+JSON.stringify(item)
		})
	}
	onReachBottom(()=>{
		pageDAO.value.pageNum++
		getData()
		console.log("....")
	})
</script>

<style lang="scss">
	.list {
		margin: 38rpx;

		background: #FFFFFF;
		border-radius: 23rpx;

		.item {
			height: 158rpx;
			width: 100%;
			display: flex;
			align-items: center;

			image {
				width: 81rpx;
				height: 81rpx;
				display: block;
				margin-right: 38rpx;
				margin-left: 38rpx;
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #F6F6F6;
				height: 158rpx;
				width: 515rpx;

				view {
					.title {
						color: #313646;
						font-size: 28rpx;
						display: block;
						margin-bottom: 10rpx;
						font-weight: bold;
					}

					.time {
						color: #999;
						font-size: 24rpx;
					}
				}

				>text {
					margin-right: 38rpx;
					color: #313646;
					font-size: 30rpx;
					font-weight: bold;
				}

				.active {
					color: #FF984D;
				}

			}
		}
	}

	page {
		background: #F6F7F9;
	}
</style>